<template>
  <a-switch v-model:checked="checked" @change="change">
    <template #checkedChildren>
      <img src="../../assets/svg/switch_btn_bg_sun.svg" alt="" />
    </template>
    <template #unCheckedChildren>
      <img src="../../assets/svg/switch_btn_bg_moon.svg" alt="" />
    </template>
  </a-switch>
</template>

<script setup lang="ts">
  import { useUtilsStoreWithOut } from '@/stores/modules/utils';

  let checked = ref<boolean>(false);
  const utilsStore = useUtilsStoreWithOut();
  // 切换深色模式
  const change = (checked: boolean | string | number) => {
    if (checked) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('dark', 'true');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('dark', 'false');
    }
    utilsStore.setDark(Boolean(checked));
  };
  onMounted(() => {
    // 判断上一次离开时是深色还是浅色
    localStorage.dark === 'true' ? (checked.value = true) : (checked.value = false);
    change(checked.value);
  });
</script>

<style scoped>
  .ant-switch-checked,
  .ant-switch {
    @apply border border-solid border-dark-900 bg-dark-900;
  }
  .ant-switch-checked {
    @apply border-light-900;
  }
  .ant-switch {
    @apply w-[50px] h-[26px];
  }
  .ant-switch::after {
    @apply w-[20px] h-[20px] top-[1.5px];
  }
  .ant-switch :deep(.ant-click-animating-node) {
    @apply opacity-0;
  }
  
</style>
